<template>
    <div>
        <div class="top">
            <img src="../img/1.jpg" width="120px" height="120px">
            <div class="top_right">
                <p>米家互联网烘洗一体机</p>
                <select>
                    <option value="">白色</option>
                </select>
                <p>
                    <span>¥1999</span><span>¥2299</span><span>-</span><span>1</span><span>+</span>
                </p>
            </div>
        </div>
        <div class="center">
            <p><span>换购</span><span>加599元得小米蓝牙 ¥599</span><span>(已省¥100)</span> <span>选购></span></p>
            <p><span>换购</span><span>加599元得小米蓝牙 ¥599</span><span>(已省¥100)</span> <span>选购></span></p>
            <p><span>换购</span><span>加599元得小米蓝牙 ¥599</span><span>(已省¥100)</span> <span>选购></span></p>
        </div>
        <div class="bottom">
            <p>更多↓</p>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style scoped lang="scss">
.top {
    width: 80%;
    padding: 20px;
    margin: auto;
    display: flex;
    img{
        display: block;
        margin-left: -10px;
    }
    .top_right {
        padding: 20px;
        line-height: 30px;
        p:nth-child(3){
            span{
                margin:auto 5px;
            }
            span:nth-child(1){
                color: red;
            }
            span:nth-child(2){
                color: #ccc;
                text-decoration: line-through;
            }
            span:nth-child(3){
                color: #ccc;
            }
        }
    }
}
.center{
    padding: 5px 40px;
    p{
        span:nth-child(1){
            font-weight: bold;
            margin-right: 20px;
        }
        span:nth-child(3){
            color: red;
        }
        span:nth-child(4){
            color: #ccc;
        }
    }
}
.bottom{
    text-align: center;
    margin-top: 30px;
}
</style>